<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
<div id="app1">
    <input v-model="message" placeholder="edit me"/>
    <p>{{message}}</p>
</div>
<hr/>
<div id="app2">
    <span>multiline message is:</span>
    <p style="white-space: pre-line">{{message}}</p>
    <br/>
    <textarea v-model="message" placeholder="add muliple lines"></textarea>
</div>
<hr/>
<div id="app3">
    <input type="checkbox" id="checkbox" v-model="checked"/>
    <label for="checkbox">{{checked}}</label>
</div>
<hr/>
<div id="app4">
    <input type="checkbox" id="jack" value="jack" v-model="checkedNames"/>
    <label for="jack">jack</label>
    <input type="checkbox" id="john" value="john" v-model="checkedNames"/>
    <label for="john">john</label>
    <input type="checkbox" id="mike" value="mike" v-model="checkedNames"/>
    <label for="mike">mike</label>
    <br/>
    <span>Checked names: {{checkedNames}}</span>
</div>
<hr/>
<div id="app5">
    <input type="radio" id="one" value="one" v-model="picked"/>
    <label for="one">One</label>
    <br/>
    <input type="radio" id="two" value="two" v-model="picked"/>
    <label for="two">Two</label>
    <br/>
    <span>Picked: {{picked}}</span>
</div>
<hr/>
<div id="app6">
    <select v-model="selected">
        <option disabled value="">Please select one</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{selected}}</span>
</div>
<hr/>
<div id="app7">
    <select v-model="selected" multiple>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <br>
    <span>Selected: {{ selected }}</span>
</div>
<hr/>
<div id="app8">
    <select v-model="selected">
        <option v-for="option in options" :value="option.value">
            {{option.text}}
        </option>
    </select>
    <span>selected: {{selected}}</span>
</div>
<hr/>
<div id="app9">
    <input type="radio" v-model="picked" value="a"/>
    <input type="checkbox" v-model="toggle"/>
    <select v-model="selected">
        <option value="abc">ABC</option>
    </select>
    <p>{{picked}}  {{toggle}}  {{selected}}</p>
</div>
<script>
    var app1 = new Vue({
        el: '#app1',
        data: {
            message: ''
        }
    })

    var app2 = new Vue({
        el: '#app2',
        data: {
            message: ''
        }
    })
    var app3 = new Vue({
        el: '#app3',
        data: {
            checked: false
        }
    })

    var app4 = new Vue({
        el: '#app4',
        data: {
            checkedNames: []
        }
    })
    var app5 = new Vue({
        el: '#app5',
        data: {
            picked: ''
        }
    })
    var app6 = new Vue({
        el: '#app6',
        data: {
            selected: ''
        }
    })
    var app7 = new Vue({
        el: '#app7',
        data: {
            selected: []
        }
    })
    var app8 = new Vue({
        el: '#app8',
        data: {
            selected: 'B',
            options: [
                {value: 'A',text: 'One'},
                {value: 'B',text: 'Two'},
                {value: 'C',text: 'Three'},
            ]
        }
    })

    var app9 = new Vue({
        el: '#app9',
        data: {
            picked: '',
            toggle: '',
            selected: ''
        }
    })
</script>
</body>
</html>